<template>
    <view>
        <!-- Comp/list/list.wxml -->
        <view class="title-box">
            <view>综合</view>
            <view>销量</view>
            <view>价格</view>
        </view>
        <view class="goods-list">
            <block v-for="(item, index) in goodsList" :key="index">
                <view class="goods-item" @tap="onGoodsDetail" :data-gid="item.goods_id">
                    <view class="image-box">
                        <image class="goods-image" :src="item.goods_small_logo"></image>
                    </view>
                    <view class="goods-info">
                        <text class="goods-name">{{ item.goods_name }}</text>
                        <text class="goods-price">￥{{ item.goods_price }}</text>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
// Comp/list/list.js
export default {
    data() {
        return {
            goodsList: []
        };
    },

    props: {
        cid: {
            type: String,
            default: ''
        }
    },

    watch: {
        cid: function (cid) {
            console.log('Received cid:', cid);
            if (cid) {
                this.fetchGoodsData(cid);
            }
        }
    },

    mounted() {
        // 处理小程序 ready 生命周期
        this.$nextTick(() => this.ready());
    },

    methods: {
        ready: function () {
            this.fetchGoodsData(this.cid);
        },

        fetchGoodsData: function (cid) {
            const that = this;
            uni.request({
                url: `https://api-hmugo-web.itheima.net/api/public/v1/goods/search?cid=${cid}`,
                method: 'GET',
                success: function (res) {
                    if (res.data.meta.status === 200) {
                        that.setData({
                            goodsList: res.data.message.goods
                        });
                    } else {
                        console.error('Failed to fetch goods data:', res.data);
                    }
                },
                fail: function (err) {
                    console.error('Network request failed:', err);
                }
            });
        },

        onGoodsDetail: function (event) {
            const gid = event.currentTarget.dataset.gid;
            console.log('onGoodsDetail gid:', gid);
            uni.navigateTo({
                url: `/pages/goodsdetails/goodsdetails?gid=${gid}`
            });
        }
    },

    created: function () {}
};
</script>
<style>
/* Comp/list/list.wxss */
.title-box {
    display: flex;
}
.title-box view {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33.3%;
    height: 80rpx;
    font-size: 35rpx;
    color: grey;
    border-bottom: gray 1rpx solid;
}
.goods-list {
    display: flex;
    flex-direction: column;
}

.goods-item {
    display: flex;
    padding: 10px;
    border-bottom: 1px solid grey;
}
.goods-image {
    margin: 15rpx;
    width: 300rpx;
    height: 250rpx;
}
.goods-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.goods-name {
    flex: 1;
}

.goods-price {
    color: red;
}
</style>
